<template>
  <div class="custIndex" :class="setFixedTopPadding ? 'c-pt92' : ''" :style="getStyle">
    <!-- 会员续费 -->
    <div class="c-w100 c-flex-row c-pv20 c-ph30 c-fs24" :class="!isSetPageBackground? 'c-bg-FFE' : ''" v-if="isShowMemberTips && pageName == 'INDEX'" @click="linkToVipUpgrade">
      <span class="c-fc-sorange">{{memberTips}}</span>
      <span class="c-fc-smblue">{{'立即续费 >'}}</span>
    </div>
    <article v-for="(item, index) in dataList" :key="index">
      <!-- 公告组件 -->
      <section v-if="item.modelType == 61 && item.enableModule == 1 ">
        <announcement-com :item="item" :pageName="pageName"></announcement-com>
      </section>
      <!--搜索-->
      <section v-if="item.modelType == 1 && item.enableModule == 1 && !(item.items.isMallType == 1 && companyAuth.enableMallModule == 0)">
        <search-com :item="item" :pageName="pageName"></search-com>
      </section>
      <!--轮播-->
      <section v-if="showSwiperList && item.modelType == 2 && item.enableModule == 1 && item.items && item.items.length > 0">
        <swiper-com :item="item" :pageName="pageName" :upgradeMemberJump="upgradeMemberJump" :isShowWhitelace="item.isShowWhitelace" :swiperIndex="index"></swiper-com>
      </section>
      <!--导航-->
      <section v-if="item.modelType == 3 && item.enableModule == 1 && item.items.length > 0">
        <navigation-com :item="item" :upgradeMemberJump="upgradeMemberJump" :pageName="pageName"></navigation-com>
      </section>
      <!-- 魔方组件--多列图片 -->
      <section v-if="item.modelType == 34 && item.enableModule == 1 && item.items.length > 0">
        <multi-column-pic :modelType="item.modelType" :upgradeMemberJump="upgradeMemberJump" :colNum="item.colNum" :item="item" :pageName="pageName"></multi-column-pic>
      </section>
      <!-- 单列或双列宝贝 -->
      <section v-if="(item.modelType == 39 || item.modelType == 40 || item.modelType == 58) && item.enableModule == 1 && item.items.length > 0">
        <single-double-item
          :pageName="pageName"
          :borderRadius="borderRadius(item)"
          :imageSetting="imageSetting(item)"
          :marginSettings="marginSettings(item)"
          :headLine="headLine(item)"
          :modelType="item.modelType"
          :prodList="item.items"
          :visible="item.visible"
          :orderBy="item.modelType == 58 ? item.orderBy : ''"></single-double-item>
      </section>
      <!-- 魔方组件--单列图片/左右图文 -->
      <section class="c-flex-column" v-if="(item.modelType == 33 || item.modelType == 41) && item.enableModule == 1 && item.items.length > 0">
        <img-text :item="item" :upgradeMemberJump="upgradeMemberJump" :pageName="pageName"></img-text>
      </section>
      <!--单个视频-->
      <section v-if="item.modelType == 35 && item.enableModule == 1 && item.items && item.items.prods && item.items.prods.length > 0">
        <video-com :item="item" :index="index" :pageName="pageName" :upgradeMemberJump="upgradeMemberJump" :visible="item.visible"></video-com>
      </section>
      <!--单个音频-->
      <section
        :class="[item.isShowWhitelace ? 'c-ph24 c-pv30' : '', !isSetPageBackground? 'c-bg-white' : '']"
        :style="getVerticalSpacing(marginSettings(item)) + getHorizontalSpacing(marginSettings(item)) + getAplayerBorderRadius(borderRadius(item))"
        class="c-flex-column"
        v-if="item.modelType == 64 && item.enableModule == 1 && (item.items[0] && (item.items[0].audioM3u8 || item.items[0].audioM4a))">
        <div class="aplayerBox">
          <aplayer @play="playAplayer" preload="auto" mutex="true" :volume="1" :customStyle="2" :theme="homeThemeCol" :repeat="item.loop == 0 ? 'no-repeat' : 'repeat-one'" :music="{
            artist:' ',
            title: getAplayerTitle(item.items[0]),
            src: isiOS ? item.items[0].audioM3u8 : item.items[0].audioM4a,
            pic: require('../../assets/i/wap/clockIn/audio_cover_d.png'),
          }" />
        </div>
      </section>
      <!--标题模块-->
      <section v-if="item.modelType == 36 && item.enableModule == 1 && item.items.text">
        <title-com :item="item" :pageName="pageName" :upgradeMemberJump="upgradeMemberJump"></title-com>
      </section>
      <!--富文本模块-->
      <section v-if="item.modelType == 37 && item.enableModule == 1 && (item.items.text || item.items.ossPath)">
        <rich-text :item="item"></rich-text>
      </section>
      <!--多图滑动-->
      <section v-if="item.modelType == 38 && item.enableModule == 1 && item.items.length > 0">
        <multi-Pic-Slide :item="item" :upgradeMemberJump="upgradeMemberJump" :pageName="pageName"></multi-Pic-Slide>
      </section>
      <keep-alive>
        <!--友情链接-->
        <template v-if="item.modelType == 13 && item.enableModule == 1 && item.items.length > 0">
          <friend-com :item="item" :pageName="pageName" :upgradeMemberJump="upgradeMemberJump" @clickShowAddTeacher="isShowAddTeacher = true"></friend-com>
        </template>
        <!--公司简介-->
        <template v-if="item.modelType == 17 && item.enableModule == 1 && item.items != null && item.items.length > 0">
          <company-intro-com :item="item" :pageName="pageName"></company-intro-com>
        </template>
        <!--关注公众号-->
        <template v-if="item.modelType == 22 && item.enableModule == 1 && item.items != null">
          <attention-gzh-com :item="item" :pageName="pageName"></attention-gzh-com>
        </template>
        <!--优惠券-->
        <template v-if="companyAuth.enableRedeemCode == 1 && item.modelType == 23 && item.items.prods.length > 0 && !$isWxAppIos()">
          <coupons-com :item="item" :pageName="pageName" :index="index"></coupons-com>
        </template>
        <!-- 预约师资 -->
        <template v-if="item.modelType == 32 && item.enableModule == 1 && companyAuth.enableReservationModule == 1 && item.items.prods.length > 0">
          <booking-com :item="item" :pageName="pageName"></booking-com>
        </template>
        <!-- 分类 -->
        <template v-if="item.modelType == 4 && item.enableModule == 1 && item.items.prods.length > 0 && (item.items.productType == 1 || (item.items.productType == 2 && companyAuth.enableMallModule == 1))">
          <category-com :item="item" :pageName="pageName"></category-com>
        </template>
        <!-- 标签导航 -->
        <template v-if="item.modelType == 48 && item.enableModule == 1 && item.items.length > 0">
          <tag-navigation-com :item="item" :pageName="pageName"></tag-navigation-com>
        </template>
        <!-- 导师模块 -->
        <template v-if="item.modelType == 52 && item.enableModule == 1 && item.items.length > 0">
          <tutor-module :item="item" :pageName="pageName" :visible="item.visible"></tutor-module>
        </template>
        <!-- 宝贝橱窗 -->
        <template v-if="item.modelType == 53 && item.enableModule == 1 && item.items.length > 0">
          <activity-window :item="item" :pageName="pageName" :visible="item.visible"></activity-window>
        </template>
        <!-- 店铺文章 -->
        <template v-if="item.modelType == 63 && item.enableModule == 1 && item.items.prods.length > 0">
          <article-com :item="item" :pageName="pageName"></article-com>
        </template>
        <!-- 社群 -->
        <template v-if="item.modelType == 11 && item.enableModule == 1 && item.items.prods.length > 0 && companyAuth.enableSocialGroup == 1">
          <social-com :item="item" :pageName="pageName"></social-com>
        </template>

        <!-- 圈子 面授课 电子书 预告 小班课 训练营 专栏 直播 直播间 活动 特惠专区-拼团/砍价/限时购 特惠专区所有 友情灌溉 课程 测评 考试 练习 交互测评 语音测试 打卡 词典 知识套餐 资料 问答 分销商城 约课 有价券 搭配购 商城商品 -->
        <common-prod-com v-if="isShowProdCom(item)" :modelType="item.modelType" :item="item" :pageName="pageName"></common-prod-com>

      </keep-alive>
      <!-- 悬浮组件 -->
      <section v-if="item.modelType == 50 && item.enableModule == 1 && isVisitor != 1">
        <suspension-com :item="item" :pageName="pageName"></suspension-com>
      </section>
      <!-- 底部悬浮导航组件 -->
      <section v-if="item.modelType == 51 && item.enableModule == 1 && item.items && item.items.length > 0 && isHomePage == false && isVisitor != 1">
        <nav-bottom-mix :item="item" :pageName="pageName" :isHomePage="isHomePage"></nav-bottom-mix>
      </section>
      <!-- 专区组件 -->
      <section v-if="item.modelType == 59 && item.enableModule == 1 && ((item.items && item.items.length > 0 && item.templateType == 1) || (item.items && item.items.prods && item.items.prods.length > 0 && item.templateType == 2))">
        <prefecture :item="item" :pageName="pageName" :upgradeMemberJump="upgradeMemberJump" :swiperIndex="index"></prefecture>
      </section>
      <!-- 小程序视频号 -->
      <channels-live-modal v-if="item.modelType == 56 && $isWxApp()" :item="item"></channels-live-modal>
      <div class="c-w100 c-hh12" :class="pageBackground ? '' : pageBgColor ? 'pageBgColor' : 'c-bg-sgray'" v-if="(item.isHiddenGap != 1 && (item.modelType != 0 || (item.modelType == 1 && item.position == 1)))"
        :style="(item.styleParam && item.styleParam.marginSettings && item.styleParam.marginSettings.outerBottom ? `height: ${item.styleParam.marginSettings.outerBottom.size * ratio}rem` : '')"></div>
      <!-- 名片导航 -->
      <!-- <template v-if="false">
        <business-card-nav :item="item"></business-card-nav>
      </template> -->
    </article>
  </div>
</template>
<script>
import singleDoubleItem from '@/components/templates/singleDoubleItem.vue';
import friendCom from "@/components/templates/custIndexTemp/friendCom.vue";
import companyIntroCom from "@/components/templates/custIndexTemp/companyIntroCom.vue";
import attentionGzhCom from "@/components/templates/custIndexTemp/attentionGzhCom.vue";
import couponsCom from "@/components/templates/custIndexTemp/couponsCom.vue";
import bookingCom from "@/components/templates/custIndexTemp/bookingCom.vue";
import categoryCom from "@/components/templates/custIndexTemp/categoryCom.vue";
import socialCom from "@/components/templates/custIndexTemp/socialCom.vue";
import tagNavigationCom from "@/components/templates/custIndexTemp/tagNavigationCom.vue";
import swiperCom from "@/components/templates/custIndexTemp/swiperCom.vue";
import multiColumnPic from "@/components/templates/custIndexTemp/multiColumnPic.vue";
import suspensionCom from "@/components/templates/custIndexTemp/suspensionCom.vue";
import imgText from "@/components/templates/custIndexTemp/imgText.vue";
import tutorModule from "@/components/templates/custIndexTemp/tutorModule.vue";
import activityWindow from "@/components/templates/custIndexTemp/activityWindow.vue";
import searchCom from "@/components/templates/custIndexTemp/searchCom.vue";
import navigationCom from "@/components/templates/custIndexTemp/navigationCom.vue";
import titleCom from "@/components/templates/custIndexTemp/titleCom.vue";
import multiPicSlide from "@/components/templates/custIndexTemp/multiPicSlide.vue";
import navBottomMix from "@/components/templates/custIndexTemp/navBottomMix.vue";
import richText from "@/components/templates/custIndexTemp/richText.vue";
import prefecture from "@/components/templates/custIndexTemp/prefecture.vue";
import channelsLiveModal from "@/components/templates/channelsLiveModal/channelsLiveModal.vue";
import announcementCom from "@/components/templates/announcementCom.vue";
import CommonProdCom from "@/components/templates/custIndexTemp/commonProdCom.vue";
import ArticleCom from "@/components/templates/custIndexTemp/articleCom.vue";
import VideoCom from "@/components/templates/custIndexTemp/videoCom.vue";
import VueAPlayer from "@/plugin/vue-aplayer/vue-aplayer.vue";
import { appRouterChange } from "@/mixin/appRouterPush.js";
import { customStyle } from '@/utils/customStyle.js'
import { mapState } from "vuex";
//const clientW = document.documentElement.clientWidth > 640 ? 640 - 48 : document.documentElement.clientWidth - 48; //屏幕宽度
//const videoH = clientW / 320 * 180; //视频高度
export default {
  mixins: [appRouterChange, customStyle],
  components: {
    singleDoubleItem,
    friendCom,
    companyIntroCom,
    attentionGzhCom,
    couponsCom,
    bookingCom,
    categoryCom,
    socialCom,
    tagNavigationCom,
    swiperCom,
    multiColumnPic,
    suspensionCom,
    imgText,
    tutorModule,
    activityWindow,
    searchCom,
    navigationCom,
    titleCom,
    multiPicSlide,
    navBottomMix,
    richText,
    prefecture,
    channelsLiveModal,
    announcementCom,
    CommonProdCom,
    ArticleCom,
    Aplayer: VueAPlayer,
    VideoCom
  },
  props: {
    pageName: {//首页 INDEX 预览页 PREVIEW_INDEX 微页面 MICRO_PAGE
      type: String,
      default: "INDEX"
    },
    isShowMemberTips: {// 是否显示续费
      type: Boolean,
      default: false
    },
    memberTips: {
      type: String,
      default: '您的会员即将到期，请续费~'
    },
    dataList: {
      type: Array,
      default: []
    },
    upgradeMemberJump: {
      type: String,
      default: ''
    },
    isHomePage: { // 现在是否是首页
      type: Boolean,
      default: true
    },
    hasBottomBar: { // 该自定义组件是否被固定在底部
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isVisitor: localStorage.getItem("isVisitor") || 0, //1是游客
      showSwiperList: true, //解决回到首页轮播图不轮播bug
      isBCompany: localStorage.getItem("companyId") == "ldwk" ? 1 : 0,
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      navMap: global.navMap,
      swiperCount: 0,
      isiOS: navigator.userAgent.indexOf('IOSLogin') > -1 || navigator.userAgent.indexOf('IOSNewLogin') > -1 || navigator.userAgent.indexOf("IOSNewApp") > -1,
      isSetPageBackground: sessionStorage.getItem("isSetPageBackground") || 0,
      pageBackground: null, // 页面背景内容
      pageTextColor: '', // 页面标题文字颜色
      pageBgColor: '', // 页面背景颜色
      homeThemeCol: localStorage.getItem("mb7ThemeColor") || "#ff8831",
      ratio: 320 / 375 / 20, // 移动端320宽 / 后台375宽
      // isPlaying: false
    };
  },
  computed: {
    ...mapState({
      rightSuspensionIconNum: state => state.oem_store.rightSuspensionIconNum
    }),
    borderRadius() {
      return function(item) {
        return item.styleParam && item.styleParam.borderRadius ? item.styleParam.borderRadius : null;
      }
    },
    marginSettings() {
      return function(item) {
        return item.styleParam && item.styleParam.marginSettings ? item.styleParam.marginSettings : null
      }
    },
    imageSetting() {
      return function(item) {
        return item.styleParam && item.styleParam.imageSetting ? item.styleParam.imageSetting : null;
      }
    },
    headLine() {
      return function(item) {
        return item.styleParam && item.styleParam.headLine ? item.styleParam.headLine : null
      }
    },
    // 获取音频圆角
    getAplayerBorderRadius() {
      return function(borderRadius) {
        return borderRadius ? `--borderRadius: ${borderRadius.custom == 1 ? 0 : borderRadius.size * (320 / 375 / 20)}rem` : ''
      }
    },
    getAplayerTitle() {
      return function(item) {
        return item ? (item.customTitle ? item.customTitle : item.title) : ''
      }
    },
    setFixedTopPadding() {
      if (this.dataList.filter(item => (item.modelType == 1 && item.enableModule == 1 && !(item.items.isMallType == 1 && this.companyAuth.enableMallModule == 0) && item.position == 2)) &&
        this.dataList.filter(item => (item.modelType == 1 && item.enableModule == 1 && !(item.items.isMallType == 1 && this.companyAuth.enableMallModule == 0) && item.position == 2)).length > 0) {
        return true
      } else {
        return false
      }
    },
    getStyle() {
      let styleStr = '';
      if (this.pageBackground) {
        styleStr = this.pageBackground.showType == 1 ? `background-color: ${this.pageBackground.color}` :
         `background-image: url(${this.pageBackground.url});-webkit-background-image: url(${this.pageBackground.url});-moz-background-image: url(${this.pageBackground.url});background-size: 100% auto;background-repeat: repeat-y;`
      }
      return `${styleStr + ';'}${this.pageTextColor ? '--pageTextColor:' + this.pageTextColor + ';' : ''}${this.pageBgColor ? '--pageBgColor:' + this.pageBgColor + ';' : ''}`
    },
    isShowProdCom() {
      return function(item) {
        if ((item.modelType == 55 && item.enableModule == 1 && item.items.prods.length > 0 && this.companyAuth.enableCircleModule == 1) || // 圈子
        (item.modelType == 43 && item.enableModule == 1 && item.items.prods.length > 0 && this.companyAuth.enableEducationSystemModule == 1) || // 面授课
        (item.modelType == 47 && item.enableModule == 1 && item.items.prods.length > 0 && this.companyAuth.enableEbookModule == 1) || // 电子书
        (item.modelType == 15 && item.enableModule == 1 && item.items.prods.length > 0 && item.items.prods[0] != null) || // 预告
        (item.modelType == 42 && item.items.prods && item.items.prods.length > 0 && this.companyAuth.enableLivePrivateClass == 1) || // 小班课
        (item.modelType == 31 && item.enableModule == 1 && this.companyAuth.enableTrainingModule == 1 && item.items.prods.length > 0) || // 训练营
        (item.modelType == 7 && item.enableModule == 1 && item.items.prods.length > 0 && this.companyAuth.enableColumnModule == 1) || // 专栏
        (item.modelType == 18 && item.enableModule == 1 && this.companyAuth.enableTeleviseLive == 1 && item.items.prods.length > 0) || // 直播
        (item.modelType == 54 && item.enableModule == 1 && this.companyAuth.enableLivePersonalModule == 1 && item.items.prods.length > 0) || // 直播间
        (item.modelType == 16 && item.enableModule == 1 && this.companyAuth.enableActivityModule == 1 && item.items.prods.length > 0) || // 活动
        (item.modelType == 6 && item.enableModule == 1 && item.items.prods.length > 0 && this.companyAuth.enableCollage == 1) || // 特惠专区 拼团
        (item.modelType == 49 && item.enableModule == 1 && item.items.prods.length > 0 && this.companyAuth.enableBargain == 1) || // 特惠专区 砍价
        (item.modelType == 27 && item.enableModule == 1 && item.items.prods.length > 0 && item.items.isMall == 0 && this.companyAuth.enableFlashSalesModule == 1) || // 特惠专区 限时购
        (item.modelType == 28 && item.enableModule == 1 && ((item.items.list[0].prods.length > 0 && item.items.list[0].enableModule == 1 && item.items.list[0].isChecked && this.companyAuth.enableCollage == 1) || (item.items.list[1].prods.length > 0 && item.items.list[1].enableModule == 1 && item.items.list[1].isChecked && this.companyAuth.enableFriendHelper == 1) || (item.items.list[2].prods.length > 0 && item.items.list[2].enableModule == 1 && item.items.list[2].isChecked && this.companyAuth.enableFlashSalesModule == 1) || (item.items.list[3].prods.length > 0 && item.items.list[3].enableModule == 1 && item.items.list[3].isChecked && this.companyAuth.enableBargain == 1))) || // 特惠专区 所有
        (item.modelType == 20 && item.enableModule == 1 && item.items.prods.length > 0 && this.companyAuth.enableFriendHelper == 1) || // 友情灌溉
        (item.modelType == 5 && item.enableModule == 1 && item.items.prods.length > 0) || // 课程
        (item.modelType == 9 && item.enableModule == 1 && item.items.prods.length > 0 && this.companyAuth.enableExamModule == 1) || // 测评
        (item.modelType == 45 && item.enableModule == 1 && item.items.prods.length > 0 && this.companyAuth.enableExamModule == 1) || // 考试
        (item.modelType == 46 && item.enableModule == 1 && item.items.prods.length > 0 && this.companyAuth.enableQuestionBankModule == 1) || // 练习
        (item.modelType == 29 && item.enableModule == 1 && item.items.prods.length > 0 && this.companyAuth.enableMutualTestModule == 1) || // 交互测评
        (item.modelType == 30 && item.enableModule == 1 && item.items.prods.length > 0 && this.companyAuth.enableSpeechTestModule == 1) || // 语音测评
        (item.modelType == 19 && item.enableModule == 1 && item.items.prods.length > 0 && this.companyAuth.enableSignCardModule == 1) || // 打卡
        (item.modelType == 26 && item.enableModule == 1 && item.items.prods.length > 0 && this.companyAuth.enableDictionaryModule == 1) || // 词典
        (item.modelType == 21 && item.enableModule == 1 && item.items.prods.length > 0 && this.companyAuth.enableComboModule == 1) || // 知识套餐
        (item.modelType == 10 && item.enableModule == 1 && this.companyAuth.enableDatumModule == 1 && ((!item.items.type || item.items.type == 5) || (([1, 2].includes(item.items.type)) && item.items.prods && item.items.prods.length > 0))) || // 资料
        (item.modelType == 8 && item.enableModule == 1 && this.companyAuth.enableQuestionModule == 1 && item.items.prods.length > 0 && item.items.prods[0] != null && item.items.prods[0].status == 1) || // 问答
        (item.modelType == 25 && item.enableModule == 1 && item.items.prods.length > 0 && this.companyAuth.enableDistributionMarketModule) || // 分销商城
        (item.modelType == 24 && item.enableModule == 1 && item.items.prods.length > 0 && this.companyAuth.enableReservationModule == 1) || // 约课
        (item.modelType == 60 && item.enableModule == 1 && item.items.prods.length > 0 && this.companyAuth.enableRedeemCode == 1 && !this.$isWxAppIos()) || // 有价券
        (item.modelType == 62 && item.enableModule == 1 && item.items.prods.length > 0) || // 搭配购
        (item.modelType == 12 && item.enableModule == 1 && item.items.prods.length > 0 && this.companyAuth.enableMallModule == 1) // 商城商品
        ) {
          return true
        } else {
          return false
        }
      }
    }
  },
  created() {
  },
  mounted() {
    this.companyAuth = localStorage.getItem("companyAuth") && JSON.parse(localStorage.getItem("companyAuth"));
  },
  destroyed() {
    if (sessionStorage.getItem('pageTextColor')) sessionStorage.removeItem('pageTextColor');
  },
  activated() {
    this.showSwiperList = true;
    this.companyAuth = localStorage.getItem("companyAuth") && JSON.parse(localStorage.getItem("companyAuth"));
  },
  deactivated() {
    if (sessionStorage.getItem('microBottomFixed')) sessionStorage.removeItem('microBottomFixed');
    this.showSwiperList = false;
  },
  watch: {
    dataList() {
      this.companyAuth = localStorage.getItem("companyAuth") && JSON.parse(localStorage.getItem("companyAuth"));
      if (this.dataList && this.dataList.length > 0) {
        this.pageBackground = null;
        this.pageTextColor = '';
        this.pageBgColor = '';
        // 页面背景、标题颜色基础设置
        if (this.dataList[0] && this.dataList[0].modelType == 0) {
          let item = this.dataList[0];
          if (sessionStorage.getItem('pageTextColor')) sessionStorage.removeItem('pageTextColor')
          if (sessionStorage.getItem('isSetPageBackground')) sessionStorage.removeItem('isSetPageBackground')
          this.isSetPageBackground = 0;
          if (item.items.pageText && item.items.pageText.type == 2) {
            sessionStorage.setItem('pageTextColor', item.items.pageText.color);
            this.pageTextColor = item.items.pageText.color;
          }
          if (item.items.pageBackground && item.items.pageBackground.type == 2) {
            sessionStorage.setItem('isSetPageBackground', 1);
            this.isSetPageBackground = 1;
            this.pageBackground = item.items.pageBackground;
            this.pageBgColor = this.pageBackground.showType == 1 ? this.pageBackground.color : '';
          }
        }
        let item = this.dataList.find(item => item.modelType == 51) ? (this.dataList.filter(item => item.modelType == 51) ? this.dataList.filter(item => item.modelType == 51)[0] : null) : null;
        if ((item && item.modelType == 51 && item.enableModule == 1 && item.items && item.items.length > 0 && !this.hasBottomBar) || this.hasBottomBar) {
          sessionStorage.setItem('microBottomFixed', true);
        } else {
          sessionStorage.setItem('microBottomFixed', false);
        }
        // 兼容没有visible字段
        this.dataList.forEach((item, index) => {
          if (item.visible) {
            let visible = {
              priceVisible:item.visible.priceVisible == undefined ? true : item.visible.priceVisible, // 价格、商品价格
              originalPriceVisible:item.visible.originalPriceVisible == undefined ? false : item.visible.originalPriceVisible, // 划线价格(营销活动的划线价格，划线的是产品没参加营销活动时的购买价)
              dataVisible:item.visible.dataVisible == undefined ? true : item.visible.dataVisible, // 商品数据、数据字段、数据
              statusVisible:item.visible.statusVisible == undefined ? true : item.visible.statusVisible, // 状态
              forecastVisible:item.visible.forecastVisible == undefined ? true : item.visible.forecastVisible, // 预告时间
              qrVisible:item.visible.qrVisible == undefined ? true : item.visible.qrVisible, // 预告二维码
              vipVisible:item.visible.vipVisible == undefined ? true : item.visible.vipVisible, // vip角标
              crossedPriceVisible:item.visible.crossedPriceVisible == undefined ? false : item.visible.crossedPriceVisible, // 划线价格（产品的划线价格，只作展示，不作为售卖价）
              titleVisible:item.visible.titleVisible == undefined ? 2 : item.visible.titleVisible, // 划线价格（产品的划线价格，只作展示，不作为售卖价）
              prodTypeVisible:item.visible.prodTypeVisible == undefined ? '' : item.visible.prodTypeVisible, // 商品类型 专区
            }
            if (visible.priceVisible == false && visible.dataVisible == false && visible.statusVisible == false && visible.crossedPriceVisible == false && visible.titleVisible == 0 && [39, 58].includes(item.modelType)) {
              // 商品列表
              visible.isShowTxtArea = false;
            } else if (visible.priceVisible == false && visible.dataVisible == false && visible.statusVisible == false && visible.prodTypeVisible == false && visible.crossedPriceVisible == false && visible.titleVisible == 0 && [40, 48, 59].includes(item.modelType)) {
              // 标签导航 专区
              visible.isShowTxtArea = false;
            } else if (visible.priceVisible == false && visible.dataVisible == false && (visible.crossedPriceVisible == false) && visible.titleVisible == 0 && [5, 7, 10, 21, 31].includes(item.modelType)) {
              // 课程 专栏 资料 训练营 知识套餐 电子书(电子书有作者 默认展示)
              visible.isShowTxtArea = false;
            } else if (visible.priceVisible == false && visible.titleVisible == 0 && ((visible.dataVisible == false && item.modelType == 42) || (visible.statusVisible == false && [18, 54].includes(item.modelType)))) {
              // 小班课 公开课 直播间
              visible.isShowTxtArea = false;
            } else {
              visible.isShowTxtArea = true;
            }
            this.$set(this.dataList[index], 'visible', visible)
          }
        })
        this.dataList.forEach((item, index) => {
          // 兼容轮播旧数据，没有orderby字段
          if (item.modelType == 2 && !item.orderBy) {
            this.$set(this.dataList[index], 'orderBy', 1)
          }
          // 子店铺
          if (item.modelType == 51 && item.items) {
            for (let i = 0; i < item.items.length; i++) {
              if (item.items[i].navType == 22) {
                if (item.items[i].mId.includes('isPromotedAccount=1')) {
                  item.items[i].isPromotedAccount = 1;
                }
              }
            }
          }
          // 获取右边测边悬浮窗图标数量
          if (item.modelType == 50) {
            let index = this.dataList.findIndex(item => item.modelType == 50);
            this.$set(this.dataList[index], 'iconNum', this.rightSuspensionIconNum);
          }
          // 视频组件增加一个默认字段
          if (item.modelType == 35 && item.items.prods && item.items.prods.length > 0) {
            let prods = item.items.prods;
            prods.forEach(obj => {
              obj.isShowBtn = true;
              if (!obj.videoCover) obj.videoCover = 'https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/video-bg2.png';
            });
            this.$set(this.dataList[index].items, 'prods', JSON.parse(JSON.stringify(prods)));
          }
        })
      }
    }
  },
  methods: {
    playAplayer(src) {
      if (typeof src == 'string') {
        let arr = document.getElementsByTagName("video");
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].src != src) {
            arr[i].pause();
          }
        }
      }
    },
    // 弹出班主任
    changeShowAddTeacher() {
      this.$store.commit('updateShowAddTeacher', true);
    },
    linkToVipUpgrade() {
      let toPath = "/member/vip/vipUp";
      this.iosAppRouteChange(toPath);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.pageBgColor {
  background-color: var(--pageBgColor);
}
.pageTextColor {
  color: var(--pageTextColor);
}
.c-pt92 {
  padding-top: 2.3rem;
}
.custIndex .aplayerBox {
  box-shadow: none;
}
.custIndex .aplayer1 *{
  box-sizing: border-box;
}
.custIndex .aplayer1{
  background-color: #ffffff !important;
  border: 1px solid #F2F2F2;
  border-radius: var(--borderRadius) !important;
  padding-left: 0.6rem;
  height: 3.5rem !important;
  margin: 0px !important;
}
.custIndex .aplayer1 .aplayer-pic {
  width: 2rem;
  height: 3.5rem !important;
}
.custIndex .aplayer1 .aplayer-body .aplayer-info1 {
  height: 3.5rem !important;
  padding: 0;
  display: inline-block;
  padding-bottom: 0.4rem !important;
}
.custIndex .aplayer-pic .aplayer-play, .custIndex .aplayer-pic .aplayer-pause1 {
  height: 0.9rem;
  width: 0.9rem;
  bottom: 44%;
  right: 58%;
}
.custIndex .aplayer-pic .aplayer-pause1 .aplayer-icon-pause{
  height: 14px;
  width: 14px;
  top: 2px;
  left: 1px;
}
.custIndex .aplayer-pic .aplayer-play .aplayer-icon-play{
  top: 1px;
  left: 1.5px;
  height: 16px;
  width: 16px;
}
.custIndex .aplayer1 .aplayer-body .aplayer-info1 .aplayer-music {
  height: 1.0rem;
  line-height: 0.5rem;
  padding-bottom: 0.2rem;
  margin-top: 0.2rem;
}
.custIndex .aplayer1 .aplayer-body .aplayer-info1 .aplayer-music .aplayer-title {
  font-size: 0.6rem !important;
  line-height: 1.2rem !important;
  font-weight: bold !important;
  color: #333333 !important;
}
.custIndex .aplayer1 .aplayer-bar,
.custIndex .aplayer-bar-wrap1 .aplayer-bar .aplayer-loaded,
.custIndex .aplayer-bar-wrap1 .aplayer-bar .aplayer-played {
  height: 0.2rem;
  border-radius: 0.1rem;
}
.custIndex .aplayer1 .aplayer-thumb {
  border: 1px solid #FFFFFF !important;
  height: 0.4rem !important;
  width: 0.4rem !important;
  margin-right: 0px;
  right: 0.2rem !important;
  top: 0.04rem !important;
  margin-top: -0.12rem !important;
  box-sizing: border-box;
}
.custIndex .aplayer1 .aplayer-time1 {
  line-height: 0.8rem !important;
}
.custIndex .aplayer-bar-wrap1 .aplayer-bar {
  background: var(--rgba10color);
}
</style>